// 故障快照中,点击问题详情页面
<template>
  <div class="box">
    <el-dialog title="故障问题详情" :visible.sync="countListData.contractDialogVisible">
      <div class="dialogText">
        <el-row class="detailsRow">
          <el-col :span="12">
            <div class="details-row">
              <span>资产名称：</span>
              <span>{{ countListData.contractDetailList.zcmc }}</span>
            </div>
            <div class="details-row">
              <span>IP地址：</span>
              <span>{{ countListData.contractDetailList.ip }}</span>
            </div>
            <div class="details-row">
              <span :show-overflow-tooltip="true">辖区：</span>
              <span>{{
                countListData.contractDetailList.zcsfmc +
                countListData.contractDetailList.zccsmc +
                countListData.contractDetailList.zcqxmc +
                countListData.contractDetailList.zcjdmc +
                countListData.contractDetailList.xxdz
              }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="details-row">
              <span>资产类型：</span>
              <span
                >{{ countListData.contractDetailList.zclxmc1 ? countListData.contractDetailList.zclxmc1 + ' / ' : '' }}
                {{ countListData.contractDetailList.zclxmc2 ? countListData.contractDetailList.zclxmc2 + ' / ' : '' }}
                {{ countListData.contractDetailList.zclxmc3 }}</span
              >
            </div>
            <div class="details-row">
              <span>品牌：</span>
              <span>{{ countListData.contractDetailList.ppmc }}</span>
            </div>
            <div class="details-row">
              <span>型号：</span>
              <span>{{ countListData.contractDetailList.xh }}</span>
            </div>
          </el-col>
        </el-row>
        <el-table ref="pilian" :data="gridData" border :header-cell-style="{ backgroundColor: '#ECF3FC' }" minHeight="250">
          <el-table-column type="index" label="序号" min-width="50" align="center" />
          <el-table-column property="zsxm" :label="countListData.type === '设备' ? '故障类型' : '问题类型'" min-width="250">
            <template slot-scope="scope">{{ scope.row.lbmcs + ' / ' + scope.row.lbmc }}</template>
          </el-table-column>
          <el-table-column :label="countListData.type === '设备' ? '故障描述' : '问题描述'" min-width="250">
            <template slot-scope="scope">
              <span>{{ countListData.type === '设备' ? scope.row.gzms : scope.row.wtz }}</span>
            </template>
          </el-table-column>
          <el-table-column property="ssjs" :show-overflow-tooltip="true" label="报障时间" min-width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.bzsj | dateFormat }}</span>
            </template>
          </el-table-column>
          <el-table-column property="SFSCGD" label="故障状态" min-width="100">
            <template slot-scope="scope">
              <span :class="[`type${Number(scope.row.SFSCGD)}`, 'type']">{{ type[Number(scope.row.SFSCGD)] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="footerPagination">
        <el-row class="page-row borderNone">
          <el-col :span="12">
            <el-pagination
              background
              layout="prev, pager, next, total"
              @current-change="addHandleCurrentChange2"
              :current-page.sync="addCurrentPage2"
              :page-size="addPageSize2"
              :total="addTotal2"
              :hide-on-single-page="paginationValue2"
            ></el-pagination>
          </el-col>
          <el-col :span="12" style="height: 47px; display: table">
            <el-button @click="countListData.contractDialogVisible = false" class="btnSizeStyle">取 消</el-button>
            <el-button type="primary" @click="countListData.contractDialogVisible = false" class="btnSizeStyle">确 定</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { yeWu } from '@/utils/allUrl.js'
export default {
  props: ['countListData'],
  data: function () {
    return {
      // type: ['未生成', '已受理', '待确认', '正常关闭', '驳回', '挂起', '外派', '异常关闭'], // 正常和异常关闭不需要
      type: ['未生成工单', '已生成工单', '已解决'],
      addCurrentPage2: 1, // 详情翻页
      addPageSize2: 5,
      addTotal2: 0, // 详情翻页
      paginationValue2: false, // 详情翻页数据为一条时隐藏
      gridData: [], // 详情数据源
    }
  },
  watch: {
    countListData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal.contractDialogVisible) {
          this.huoquxiangqing()
        }
      },
    },
  },
  methods: {
    addHandleCurrentChange2(val) {
      this.addCurrentPage2 = val
      this.huoquxiangqing()
      // selectById
    },
    // gz/selectById
    // wtjs/selectWTId
    async huoquxiangqing() {
      const params = new URLSearchParams()
      params.append('M_', this.addCurrentPage2) // 当前页
      params.append('N_', this.addPageSize2) // 每页显示行数
      params.append('sbid', this.countListData.xianqingID) // 当前用户ID
      const { data: res } = await this.$http.post(yeWu + this.countListData.url, params)
      if (res.code === '0014') {
        return ''
      } else if (res.code === '0013') {
        this.gridData = []
        this.addTotal2 = 0
        return
      } else if (res.code !== '0000') {
        this.tableLoad = false // 表格加载中样式
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.gridData = res.data.list
      this.addTotal2 = res.data.total
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/xjzxCommon.scss';
@import '@/assets/scss/detailsRow.scss';
::v-deep .el-dialog__body {
  padding-top: 0;
}
// .box {
// width: 100%;
// height: 100%;
// .dialogText {
//   font-size: 14px;
//   color: #333;
//   .star {
//     color: #f56c6c;
//   }
// .contentFont {
//   display: inline-block;
//   width: 120px;
//   color: #7a7a7a;
//   text-align: right;
// }
// .lineHight .el-row {
//   line-height: 30px;
// }
// }
// }
</style>
